<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人设置</title>
		<link rel="stylesheet" href="k/personal/personal.css" />
		<link rel="stylesheet" href="k/personal/footer.css" />
		<link rel="stylesheet" href="k/personal/header.css" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=pvIEc7QfKZrYGS08yNGS2U1zyHUDXTAE"></script>
		<title>Baidu Map </title>
		<style type="text/css">
			html {height: 100%}
			body {height: 100%;margin: 0px;padding: 0px}
       		#container{height:100%}  
		</style>
	</head>
	<body>
	<!--页头部分-->
	<div class="header-container" id="header-container">
		<div id="top-nav" class="top-nav">
			<div class="top-nav-container clearfix">
				<div class="group mini-logo Hide">
					<a target="_blank" class="item" href="#">
						<i class="icon-logo"></i>
						大众点评首页
					</a>
				</div>
				<div class="group quick-menu">
					<a class="item write-dp" href="#">写点评</a>
					<span class="seprate">|</span>
					<span class="login-container J-login-container">
						<c:if test="${empty userinfos }">
							<a class="item" href="#">你好，请登录</a>
							<a class="item login" href="#">免费注册</a>
						</c:if>
						<c:if test="${not empty userinfos }">
							<a class="item" href="#">${userinfos.username},&nbsp你好</a>
							<a class="item" href="exit" style="padding-left:0px ;">退出</a>
						</c:if>
					</span>
					<span class="seprate">|</span>
					<a href="#" class="item1 J-my-center-trigger">
						个人中心
						<i class="icon i-arrow"></i>
					</a>
					<span class="seprate">|</span>
					<a target="_blank" class="item2 J-shop-serve-trigger">
						商户服务
						<i class="icon i-arrow"></i>
					</a>
					<span class="seprate">|</span>
					<a target="_blank" class="item3 J-help-trigger">
						帮助中心
						<i class="icon i-arrow"></i>
					</a>
					<span class="seprate">|</span>
					<!--<a target="_blank" class="item J-brower-trigger">
						最近浏览
						<i class="icon i-arrow"></i>
					</a>
					<span class="seprate">|</span>-->
					<a target="_blank" class="item4 J-site-trigger">
						网站导航
						<i class="icon i-arrow"></i>
					</a>
				</div>
				<div class="panel panel1 my-center J-my-center-target Hide" style="top: 33px; left: 845.5px; width: 101.5px;">
					<a href="#" target="_blank">我的点评</a>
					<a href="#" target="_blank">我的收藏</a>
					<a href="#" target="_blank">我的团购</a>
					<a href="#" target="_blank" class="my-center-item">我的部落</a>
					<a href="#" target="_blank">我的订座</a>
					<a href="#" target="_blank">我的设置</a>
				</div>
				<div class="panel panel2 my-center J-shop-serve-target Hide" style="top: 33px; left: 951.6px; width: 102px;">
					<a href="#" target="_blank">商户中心</a>
					<a href="#" target="_blank">商户合作</a>
					<a href="#" target="_blank" class="shop-item">旺铺宝</a>
					<a href="#" target="_blank">招募餐饮代理</a>
					<a href="#" target="_blank">招募非餐饮代理</a>
				</div>
				<div class="panel panel3 my-center J-help-target Hide" style="top: 33px; left: 1058.5px; width: 102px;">
					<a href="#" target="_blank">联系客服</a>
					<a href="#" target="_blank">规则中心</a>
				</div>
			</div>	
       </div>
   </div>
			   
	<!-- <form action="personal" method="post"> -->
		<div class="all-background"><!--中间所有内容，在这设置背景颜色-->
			<div class="all-text"><!--中间的内容-->
				<div class="out-link"><!--超链接-->
					<a href="personLevel.jsp">去我的点评网»</a>
				</div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
				<div class="table-all"><!--下面的-->
					<div class="table-left"><!--左边的-->
						<h4>我的设置</h4><!--我的设置-->
						<div class="left-aside">
							<ul>
								<div class="link link-first">
									<li class="personInfo">
										<a href="#">个人资料</a>
									</li>
								</div>
								<div class="links">
									<a class="personInfo" href="#">基本资料</a>
									<a class="personPhoto" href="#">个人头像</a>
									<a class="personDress" href="#">收货地址</a>
								</div>
								<div class="link">
									<li class="codeInformation">
										<a href="#">账号信息</a>
									</li>
								</div>
								<div class="link">
									<li class="">
										<a href="#">隐私设置</a>
									</li>
								</div>
								<div class="link">
									<li class="">
										<a href="#">消息提醒</a>
									</li>
								</div>
								<div class="link">
									<li class="">
										<a href="#">订阅设置</a>
									</li>
								</div>
								<div class="link">
									<li class="">
										<a href="#">绑定与同步</a>
									</li>
								</div>
								<div class="link">
									<li class=""> 
										<a href="#">黑名单</a>
									</li>
								</div>
							</ul>
						</div>
					</div>
					<div style="position: relative;" class="table-right"><!--相对，下面的子div绝对-->
						<div style="position: absolute;" class="right-information right-all"><!--右边的1--><!--基本信息-->
							<div class="right-up">
								<p>基本信息
									<font>(<i>*</i>为必须填写项)</font>
								</p>
							</div>
							<p>为了让各位DPer了解你，以下信息将显示在个人资料页（工作地和住处不会显示）。</p>
							<div class="down-information"><!--下面的-->
								<div class="down-infor">
									<form action="personal" method="post">
										<input type="hidden" name="userid" value="${userinfos.userid}" />
										<div class="infor-name">
											<div class="name-title">
												<span><i>*</i>昵称  :</span>
											</div>
											<div class="name-input">
												<input type="text" name="username" id="username" value="${userinfos.username }" placeholder="昵称" />
											</div>
										</div>
										<div class="infor-sex">
											<div class="sex-title">
												<span>性别 :</span>
											</div>
											<div class="sex-input">
												<input type="radio" name="usersex" id="usersex" value="1" />
												<label>男</label>
												<input type="radio" name="usersex" id="usersex" value="0" />
												<label>女</label>
											</div>
										</div>
										<div class="infor-dress">
											<div class="dress-title">
												<span><i>*</i>常居地:</span>
											</div>
											<div class="dress-input">
												<input type="text" name="alwaddress" id="" value="${userinfos.alwaddress}" placeholder="请输入您的常居地" />
											</div>
										</div>
										<div class="infor-areas">
											<div class="area-title">
												<span>活动区域:</span>
											</div>
											<div class="area-map">
												<p>
													<span>住处 :</span><input name="actaddress" id="actaddress" value="" placeholder="雨花台区" style="border: none; width: 50px; font-size-adjust: 14px;">
													<a href="#" class="ainfo"> [ 修改 ]</a>
												</p>
												<!--<p><span>工作地 :</span> 摄山<a href=""> [ 添加 ]</a></p>-->
											</div>
										</div>
										<div class="infor-introduction">
											<div class="intro-title">
												<span>自我介绍:</span>
											</div>
											<div class="intro-textarea">
												<textarea name="introducemyself" rows="5" cols="55" placeholder="简单介绍下自己，让更多Dper了解你吧~~">
													
												</textarea>
											</div>
										</div>
										<div class="infor-btn">
											<div class="btn-input">
												<button type="submit">保存</button>
												<!--<input type="button" name="" id="" value="保存" />-->
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
						<div style="position: absolute;display: none;" class="right-person-imge right-all">
							<!--右边的2-->
							<div class="right-up">
								<!--个人头像-->
								<p>个人头像</p>
							</div>
							<p>支持JPG、PNG、GIF、BMP格式的图片文件，文件大小小于5M</p>
							<div class="down-image">
								<!--下面的-->
								<div class="pic-title">
									<p>当前头像 :</p>
								</div>
								<form action="perPicservlet" method="post">
									<div class="pic-head">
										<img id="preview" height="200" border="0" title="" src="k/img/personalLevel/burger.png">
										<div class="btn upload">
											<input type="file" name="image_file" id="image_file" class="upload_pic" onchange="fileSelected('preview','image_file');">
										</div>
									</div>
									<div class="pic-say">
									</div>
									<div class="pic-btn">
										<button type="submit">保存</button>
									</div>
								</form>
							</div>
						</div>

						<div style="position: absolute;display: none;" class="right-dress right-all">
							<!--右边的3-->
							<div class="right-up">
								<!--收货地址-->
								<p>收货地址
									<font>(<i>*</i>为必须填写项)</font>
								</p>
							</div>
							<p>如果你在活动中获得了奖品，我们将按照以下收货地址邮寄奖品，所以请填写真实的收货信息.</p>
							<div class="down-dress">
								<!--下面的-->
								<div class="down-dre">
									<form action="perAddressservlet" method="post">
										<input type="hidden" name="userid" value="${userinfos.userid}" />
										<div class="dre-name dreAll">
											<div class="name-title titleAll">
												<span><i>*</i>收货人姓名 :</span>
											</div>
											<div class="name-input inputAll">
												<input type="text" name="name" id="name" value="${userinfos.name}" />
											</div>
										</div>
										<div class="dre-areas dreAll">
											<div class="area-title titleAll">
												<span><i>*</i>所在地区 :</span>
											</div>
											<div class="detail-input inputAll">
												<input type="text" name="goodsaddress" id="goodsaddress" value="${userinfos.goodsaddress}" placeholder="输入城市所在地,例如：南京市雨花台区" />
											</div>
											<!--<div class="area-select inputAll container">
												<div class="area-porvince row">
													<!--<select>
														<option>江苏</option>
													</select>
												</div>
												<div class="area-city">
													<select>
														<option>南京</option>
													</select>-->
													<!--<select class="province" name ="province"></select>
													<select class="city" name ="city"></select>
													<select class="district" name ="district"></select>
												</div>
											</div>-->
										</div>
										<div class="dre-detail dreAll">
											<div class="detail-title titleAll">
												<span><i>*</i>详细地址:</span>
											</div>
											<div class="detail-input inputAll">
												<input type="text" name="detailaddress" id="detailaddress" value="${userinfos.detailaddress}" placeholder="输入具体街道,例如:安德门小行路25号" />
											</div>
										</div>
										<div class="dre-postcode dreAll">
											<div class="postcode-title titleAll">
												<span><i>*</i>邮编:</span>
											</div>
											<div class="postcode-input inputAll">
												<input type="text" name="postcode" id="postcode" value="" placeholder="210000"/>
											</div>
										</div>
										<div class="dre-telephone dreAll">
											<div class="telephone-title titleAll">
												<span>联系电话:</span>
											</div>
											<div class="telephone-input inputAll">
												<input type="text" name="telephone" id="telephone" value="${userinfos.telephone}" />
											</div>
										</div>
										<div class="dre-btn dreAll">
											<div class="btn-input">
												<button type="submit">保存</button>
											</div>
										</div>
									</form>	
								</div>
							</div>
						</div>
						<div style="position: absolute;display: none;" class="right-account right-all">
							<!--右边的4-->
							<div class="right-up">
								<!--账号信息-->
								<p>账号信息</p>
							</div>
							<div class="drow-account">
								<!--下面的-->
									<div class="mailBox account">
									<div class="tilAll"><span>邮&nbsp;箱:</span></div>
									<div class="bulidAll"><span>尚未绑定邮箱</span></div>
									<div class="hreAll"><a href="#">[立即绑定]</a></div>
								</div>
								<div class="password account">
									<div class="tilAll"><span>密&nbsp;码:</span></div>
									<div class="bulidAll"><span>******</span></div>
									<div class="hreAll-pwd hreAll"><a href="#">[修改]</a></div>
								</div>
								<div class="telephone account">
									<div class="tilAll"><span>手机号:</span></div>
									<div class="bulidAll"><span id="tel">${userinfos.telephone}</span></div>
									<div class="hreAll-tel hreAll"><a href="#">[修改]</a></div>
								</div>
							</div>
						</div>
						<!--修改密码-->
						<div style="position: absolute;display: none;" class="right-pwd right-all">
							<div class="right-up">
								<p><span class="count-info"><a href="#">账号信息</a></span><em>></em><font>修改密码</font></p>
							</div>
							<p>为了您的账户安全，请尽量避免使用与其他网站相同的密码</p>
							<form action="perAccountservlet" method="post" id="pas">
								<input type="hidden" name="userid" value="${userinfos.userid}" />
								<div class="changePwd">
									<!--<div class="change1">当前密码：<input type="text" /></div><br />  -->
									<div class="change2">新密码：<input type="text" value="" name="newpassword" id="newpassword"/></div><br />
									<div class="change3">确认密码：<input type="text" value="" name="confirmpassword" id="confirmpassword"/></div><br />
									<!-- <div class="change1">当前密码：<input type="text" /></div><br /> -->
									<div class="button"><button type="button" class="btnchange" id="pasbutton" style="width: 70px;height:30px;background-color: orange;border-radius: 5px;border: none;color: white;">保存</button></div>
								</div>
							</form>	
						</div>


						<!--修改手机号-->
						<!--<div style="position: absolute; display: none" class="right-tel  right-all">
							<div class="right-up">
								<p><span class="count-info"><a href="#">账号信息</a></span><em>></em><font>修改手机号码</font></p>
							</div>
							<div class="setp-img"></div>
							<div id="big">
								<div id="_up">
									<span>原手机号：</span>
									<input type="text" class="tex" style="height: 27px;" value="">
								</div>
								<div id="_down">
									<span>验证码： </span>
									<input type="text" class="tex">
								</div>
								<button type="button" class="btn tel-btn" >确定</button>
							</div>
						</div>-->
						<!--确认修改手机号-->
						<!--<div style="position: absolute;display: none;" class="right-confirmTel right-all">
							<div class="right-up">
								<p><span class="count-info"><a href="#">账号信息</a></span><em>></em><font>修改手机号码</font></p>
							</div>
							<div class="setp-img2"></div>
							<div id="big">
								<div id="_up">
									<span>新手机号： </span>
									<!--<select name="" id="sel">
										<option value="">中国   +86</option>
										<option value="">中国   +86</option>
										<option value="">中国   +86</option>
										<option value="">中国   +86</option>
										<option value="">中国   +86</option>
									<select>-->
										<!--<input type="text" class="tex" style="height: 27px;">
								</div>
								<div id="_down">
									<span>验证码： </span>
									
									<input type="text" class="tex">
									<a href="#">
									<i><input type="button" id="bcode" /></i>
									</a>
								</div>
								<button type="submit" class="btn complete-btn btnLink">确定</button>
							</div>
						</div>-->
						<!--修改完成-->
						<!--<div style="position: absolute;display: none;" class="complete right-all">
							<div class="right-up">
								<p><span class="count-info"><a href="#">账号信息</a></span><em>></em><font>修改手机号码</font></p>
							</div>
							<div class="setp-img3"></div>
							<div class="success">
								修改成功！
							</div>
						</div>-->
					</div>
		</div>
		<!--地图-->
		<div class="pop-box" style="width: 860px; height: 530px; z-index: 2300; top: 123.5px; left: 320.5px; position: fixed;">
			<div class="pop-main pop-map">
				<div>
					<div class="pop-hd">
						<h3>添加活动区域</h3>
						<a href="#" title="关闭" class="close J_close"></a>
					</div>
					<div class="pop-c">
						<div class="set-local-box">
							<div class="slt-addr">
								<div  class="tit" >
									<label for="">请选择坐在城市：</label>
								</div>
								<div class="slt-city">
									<div class="input-city">
										<input type="text" class="input-plain J_city citytext" placeholder="请输入城市名" />
									</div>
									<div class="pop-slt-box pop-slt" style="position: absolute; height: auto;z-index: 120; width: 150px;display: none;">
										<div class="col-exp">输入中文/拼音或↑↓选择</div>
										<div class="slt-list">
											<ul style="visibility: hidden;"></ul>
										</div>
										<div class="sc_page"></div>
									</div>
								</div>
								<div class="slt-adminarea">
									<div class="output-txt J_area firstSelect">
										<span id="yuhua">雨花台区</span>
										<i class="icon-tri-down"></i>
									</div>
									<div class="pop-slt-box firstList" style="display: none">
										<div class="slt-list">
											<ul  style="height: 240px; overflow-y: auto;" id="changeone">
												<li>栖霞区</li>
												<li>雨花台区</li>
												<li>六合区</li>
												<li>浦口区</li>
												<li>鼓楼区</li>
												<li>秦淮区</li>
												<li>建邺区</li>
												<li>江宁区</li>

											</ul>
										</div>
									</div>
								</div>
								<div class="slt-busiarea">
									<div class="output-txt output-busi J_busi secondSelect">
										<span id="andemeng">安德门/小行路</span>
										<i class="icon-tri-down"></i>
									</div>
									<div class="pop-slt-box secondList" style="display: none;position: absolute;">
										<div class="slt-list">
											<ul style="height: auto; overflow-y: hidden;" id="changetwo">
												<li>铁心桥/三江学院</li>
												<li>南京南站/明发</li>
												<li>安德门/小行</li>
												<li>西善桥</li>
												<li>虹悦城</li>
												<li>花生唐购物公园</li>
												<li>紫荆广场</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="map-box">
							<div id="sMap" class="slt-local J-map" style="height: 400px; width: 800px; position: relative; background-color: rgb(229,227,223); overflow: hidden;"></div>
							<p class="col-exp">注：地图位置标注仅供参考，具体情况以实际道路标示信息为准</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
			<!--页脚-->
			<div class="footer-container">
				<div id="channel-footer" class="channel-footer">
					<p class="links">
						<a href="#" target="_blank" rel="nofollow">关于大众点评</a>"|"
						<a href="#" target="_blank" rel="nofollow">诚信公约</a>"|"
						<a href="#" target="_blank" rel="nofollow">网站帮助</a>"|"
						<a href="#" target="_blank" rel="nofollow">网站地图</a>"|"
						<a href="#" target="_blank" rel="nofollow">推广服务</a>"|"
						<a href="#" target="_blank" rel="nofollow">媒体报道</a>"|"
						<a href="#" target="_blank" rel="nofollow">人才招聘</a>"|"
						<!--新增footer links-->
						<span class="links-container">
							<a href="" class="ext-links" rel="nofollow">最新咨询</a>"|"
						</span>
						<a href="" target="_blank">外卖订餐</a>"|"
						<a href="" target="_blank" rel="nofollow">站务论坛</a>"|"
						<a href="" target="_blank" rel="nofollow">联系我们</a>"|"
						<a href="" target="_blank" rel="nofollow">开发者</a>"|"
						<a href="" target="_blank" rel="nofollow">聚宝盆餐饮开放平台</a>
					</p>
					<p class="rights">
						<span style="margin-right:10px;">
							©2003-2017 dianping.com, All Rights Reserved.
						</span>
						<span>
							本站发布的所有内容，未经许可，不得转载，详见
							<a href="#" rel="nofollow" class="G">《知识产权声明》</a>
							。
						</span>
					</p>
				</div>
		
		</div>
		<script type="text/javascript" src="k/lib/jQuery/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="k/personal/personal.js"></script>
		<script type="text/javascript" src="k/personal/tel.js" ></script>
		<script type="text/javascript" src="k/personal/changeper.js" ></script>
		
		<!--<script type="text/javascript" src="k/personal/mapper.js" ></script>-->
		<script src="k/personal/pic.js" type="text/javascript" charset="utf-8"></script>
		<script src="k/personal/address.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
	<!--<script type="text/javascript">
		addressInit('province', 'city', 'district', '北京', '市辖区', '东城区');
	</script>-->
</html>
